<template>
  <transition class="appTransition-wrapper" :name="name">
    <slot></slot>
  </transition>
</template>
<script>
export default {
  name: 'app-transition',
  props: {
    /**
     * name值:
     * 右进右出 slideInRightOutRight
     * 右进左出 slideInRight
     * 左进右出 slideOutRight
     */
    name: {
      type: String,
      default: 'slideOutRight'
    }
  },
  data() {
    return {

    }
  },
  mounted() {
    /*// 保证在DOM渲染完毕后初始化better-scroll
    this.$nextTick(() => {
      this._initScroll()
    })*/
  },
  methods: {

  }
  /*,
    watch: {
      // 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
      data() {
        setTimeout(() => {
          this.refresh()
          if (this.autoScrollToBottom) {
            this.scrollTo(0, this.scroll.wrapperHeight - this.scroll.scrollerHeight, 100)
          }
          // it.log.warn('better-scroll has refreshed!')
        }, this.refreshDelay)
      }
    }*/
}

</script>
<style lang="scss" rel="stylesheet/scss">

//右进右出 slideInRightOutRight
.slideInRightOutRight-enter-active,
.slideInRightOutRight-leave-active {
  transition: transform .2s linear;
  transform: translate3d(0, 0, 0);
}

.slideInRightOutRight-enter,
.slideInRightOutRight-leave-active {
  transform: translate3d(100%, 0, 0);
}

//右进左出 slideInRight
.slideInRight-enter-active,
.slideInRight-leave-active {
  transition: transform .2s linear;
  transform: translate3d(0, 0, 0);
}

.slideInRight-enter {
  transform: translate3d(100%, 0, 0);
}

.slideInRight-leave-active {
  transform: translate3d(-100%, 0, 0);
}

//左进右出 slideOutRight
.slideOutRight-enter-active,
.slideOutRight-leave-active {
  transition: transform .2s linear;
  transform: translate3d(0, 0, 0);
}

.slideOutRight-enter,
.slideOutRight-leave-active {
  transform: translate3d(-100%, 0, 0);
}

.slideOutRight-leave-active {
  transform: translate3d(100%, 0, 0);
}

</style>
